<template>
  <div>
    <!-- 班级选择-->
    <label>请选择班级</label>
    <el-select v-model="c_id" placeholder="请选择班级" @change="submitForm">
      <el-option
        v-for="item in classes"
        :key="item.id"
        :label="item.cname"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-col :span="5"> 
    <el-input v-model="input" placeholder="输入学生名，查询学生" @change="searchStu()"></el-input>
    </el-col>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="学号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px" >{{ scope.row.number}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.u_id == 0">未注册</el-tag>
            <el-tag size="medium" v-if="scope.row.u_id != 0">正常</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-tag size="medium" v-if="scope.row.u_id == 0"> <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)"
            plain>注册
          </el-button></el-tag>
            <el-tag size="medium" v-if="scope.row.u_id != 0"> <el-button type="primary" size="mini" @click="resetPassword(scope.row.u_id)"
            plain>重置密码
          </el-button></el-tag>
           <el-button type="primary" size="mini" @click="changeEdit(scope.row)"
            plain>转班
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <el-button type="primary" size="medium" @click="changeMessage()"
            plain>查看转班消息
     </el-button>
     <el-button type="primary" size="medium" @click="addStuUser()"
            plain>添加学生账号
     </el-button>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
   name:'student_account_management',
  data(){
    return {
      uid: 0,
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],
      checked: false,
      input: '',
      drawer: false,
      direction: 'rtl',
      c_id:1,
      classes:[]
    };
  },
  methods:{
    submitForm(){
       axios
        .get(
          commons.baseUrl +
            "student_account_management/queryStudent?c_id=" +
            this.c_id+
            "&page=" +
            this.currentPage +
            "&size=" +
            this.size
        ).
       then(res => {
          this.tableData = res.data.data;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
       });
    },
    
    resetPassword(u_id){
      this.$confirm('此操作会将学生密码重置为初始密码“123456”, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = new URLSearchParams();
          params.append("u_id",u_id)
          axios.post(commons.baseUrl+"/student_account_management/resetPassword", params).then(res => {
            if (res.data.code == 200) {
              this.$message({
              type: "success",
              message:res.data.message
              });    
            }
           if (res.data.code == 201) {
              this.$message({
              type: "info",
              message:res.data.message
              });    
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
    },
    //跳转页面
    changeMessage( ){  
      this.$router.push('/gradedean/grade_student_account_management/grade_change_of_classmessage');
    },
    //跳转页面
    addStuUser( ){  
      this.$router.push('/gradedean/grade_student_account_management/grade_student_account_add');
    },
    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      axios
        .get(
          commons.baseUrl +
            "student_account_management/queryStudent?c_id=" +
            1 +
            "&page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then(res => {
          this.tableData = res.data.data;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      axios
        .get(
          commons.baseUrl +
            "student_account_management/queryStudent?c_id=" +
            1 +
            "&page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then(res => {
          this.tableData = res.data.data;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
    searchStu(){
      this.currentPage = 1;
      axios
        .get(
          commons.baseUrl +
            "student_account_management/searchStu?c_id=" +
            this.c_id +
            "&page=" +
            this.currentPage +
            "&size=" +
            this.size +
            "&name=" +
            this.input
        )
        .then(res => {
          if(res.data.total == 0){
             this.$message({
            type: "info",
            message:"无此人"
            });
            this.submitForm();    
          }else{
            this.tableData = res.data.data;
            console.log(res);
            this.total = res.data.total;
            this.totalPage = res.data.totalPage;
            this.currentPage = res.data.currentPage;
            this.size = res.data.size;
           }
        });
    },
    getClassByG_id(){
       axios.get(
          commons.baseUrl +
            "student_account_management/getClassByG_id?g_id=" +1 
        ).
       then(res => {
          if(res.data.code == 200){
            this.classes=res.data.data;
          }
       });
    }
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
   this.getClassByG_id();
   this.submitForm();
  }
};
</script>
<style scoped></style>
